<template>
  <div class="body_contain">
    <div class="maptop" v-if="routerLine!=='class'">
      <h3 style="margin-left:30px;color:#404040">森林全景</h3>
    </div>
    <!--    <div>-->
    <!--      <label style="margin-left:60px;" class="textofuser">姓名：</label><label class="textofuser">{{ tagName }}</label>-->
    <!--      <label class="textofuser" style="margin-left:40px;">时段：</label>-->
    <!--      <el-date-picker v-model="inTime" type="datetime" placeholder="进入时间" style="width: 180px;"></el-date-picker>-->
    <!--      <el-date-picker v-model="outTime" type="datetime" placeholder="离开时间"-->
    <!--                      style="width: 180px;margin-left:5px;"></el-date-picker>-->
    <!--      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-download"-->
    <!--                 @click="getLocusData">显示该时段路线-->
    <!--      </el-button>-->
    <!--      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-download"-->
    <!--                 @click="startNavi(this)" id="startBtn">开始导航-->
    <!--      </el-button>-->
    <!--    </div>-->
    <div id="fengMap" class="fengMap">
      <!--距离终点时间、距离信息展示-->
      <div id="description" class="description" style="float:right;"></div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api.js'

// let fengmap= require('@/assets/js/fengmap.2.4.1.min.js')
// import '@/assets/js/fengmap.2.4.1.min.js';
// import {fengmap} from '@/assets/js/fengmap.2.4.1.min.js' //注意路径
// import fengmap from 'fengmap';
// import {getTagAction} from '@/api/admin/maps'
// 获取版本号,设置title
// 定义全局map变量
var map = null
var fmapID = '' // 'supmap202001'

// 导航前地图缩放比例
var startNaviScaleLevel
// 导航过程中地图缩放比例
var naviScaleLevel = 22

// 导航对象
var navi = null
var naviList = []
// 楼层控件
var floorControl = null
// 导航是否结束
var naviStoped = false
// 导航开关
var naviSwitch = true

// 距离终点的最大距离，结束导航 单位：米
var maxEndDistance = 5
// 路径偏移的最大距离，单位：米
var maxOffsetDis = 15
// 路径偏移的最小距离，在最小距离以内坐标点自动约束到路径线上
var minOffsetDis = 3

// 路径线真实坐标点数据
var coordsData = []
// 定位点下标
var coordIndex = 0
// 当前定位点原始坐标
var currentCoord
// 导航请求定位点定时器
var naviInt
// 定位图标
var locationMarker
// 标签轨迹
var tagLocus = []
// 坐标轨迹
var coodrs = []

// 20210111
var clickedPOI = false
// 点击事件ID
var eventID = null
// 定义选中模型
var selectedModel = null

export default {
  name: 'navigate',
  components: {fengmap},
  props: ['routerLine'],
  data () {
    return {
      tagId: '',
      tagName: '',
      inTime: '',
      outTime: '',
      mapData: ''
    }
  },
  create () {
  },
  mounted () {
    this.InitFn()
  },
  methods: {
    InitFn () {
      this.$fetch(api.system_setting, {}).then(res => {
        if (res.code === 0) {
          fmapID = res.vo.map_id
          if (res.vo.map_id) {
            this.showMapFn()
          } else {
            this.$confirm('小森林地图未设置ID，请联系管理员', '提示', {
              confirmButtonText: '确定',
              showCancelButton: false,
              type: 'warning'
            }).then(() => {
            }).catch(() => {
            })
          }
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    showMapFn () {
      var self = this
      var mapObj = self.$route.query
      // self.tagId = mapObj.tagId
      // self.tagName = mapObj.tagName
      self.tagId = 12
      self.tagName = '测试'
      // xiaosenlin 	b3365c9bbefae18338c4a15a03246107
      // var mapInfo = JSON.parse(mapObj.mapInfo);
      var mapOptions = {
        // 必要，地图容器
        container: document.getElementById('fengMap'),
        // //地图数据位置
        // mapServerURL: '/roomlocationwebs/'+mapInfo.mapUrl,
        mapServerURL: '/map/' + fmapID, // fmap
        // //主题数据位置
        // mapThemeURL: '/roomlocationwebs/maps/data/theme',
        mapThemeURL: '/map/theme',
        defaultThemeName: fmapID, // 默认主题切换成在线supmap202001主题
        defaultMapScaleLevel: 21,
        // 必要，地图应用名称，通过蜂鸟云后台创建
        // appName: mapInfo.appName,
        // appName: 'xiaosenlin',
        // 必要，地图应用密钥，通过蜂鸟云后台获取
        // key: 'b3365c9bbefae18338c4a15a03246107'
        appName: '五缘湾幼儿园',
        // 必要，地图应用密钥，通过蜂鸟云后台获取
        key: 'ceb78c472e36f56caa89dcb0864d5d64'
      }
      // 初始化地图对象
      map = new fengmap.FMMap(mapOptions)
      // 打开Fengmap服务器的地图数据和主题
      map.openMapById(fmapID, function (error) {
        // 打印错误信息
        console.log('error:', error)
      })
      // 地图加载完成事件
      map.on('loadComplete', function () {
        console.log('地图加载完成！')
        // 加载楼层切换控件
        self.initFloorControl()
        // 添加初始定位点图标
        //   self.addlocationMarker(coodrs[0]);
        // 地图加载完执行画导航路径
        // self.createNavi(coodrs);
      })
      map.on('mapClickNode', function (event) {
        console.log('mapClickNode:', event)
        self.mapClickNodeFn(event)
      })
    },
    /**
     * 点击区域获取楼层信息
     */
    mapClickNodeFn (event) {
      let self = this
      if (!event.nodeType) {
        if (selectedModel) {
          selectedModel.selected = false
        }
      }

      // 鼠标左右键点击事件
      var buttonType = event.domEvent.button
      var buttonTypeText = ''
      if (buttonType === 0) {
        buttonTypeText = '我是鼠标左键点击'
        console.log('我是鼠标左键点击')
      } else if (buttonType === 2) {
        buttonTypeText = '我是鼠标右键点击'
        console.log('我是鼠标右键点击')
        return
      }

      // 地图模型
      var target = event.target
      if (!target) {
        return
      }

      // 筛选点击类型,打印拾取信息
      switch (target.nodeType) {
        // 地面模型
        case fengmap.FMNodeType.FLOOR:
          if (clickedPOI && event.eventInfo.eventID === eventID) return
          var info = '拾取对象类型： 地图 \n' +
              '地图位置坐标：x: ' + event.eventInfo.coord.x + '，y:' + event.eventInfo.coord.y
          if (selectedModel) {
            selectedModel.selected = false
          }
          // 弹出信息框
          alert(info)
          break

          // model模型
        case fengmap.FMNodeType.MODEL:
          if (clickedPOI && event.eventInfo.eventID === eventID) {
            clickedPOI = false
            return
          }
          // 过滤类型为墙的model
          if (target.typeID === 300000) {
            // 其他操作
            return
          }
          var info = '拾取对象类型： 模型 \n' +
              'FID：' + target.FID + '\n' +
              'model中心点坐标：x: ' + target.mapCoord.x + ',y:' + target.mapCoord.y + '\n' +
              '地图位置坐标：x: ' + event.eventInfo.coord.x + '，y:' + event.eventInfo.coord.y
          var mapData = {
            fid: target.FID,
            center: [target.mapCoord.x, target.mapCoord.y],
            clickPoint: [event.eventInfo.coord.x, event.eventInfo.coord.y]
          }
          // 模型高亮
          // if (selectedModel && selectedModel.FID != target.FID) {
          //   selectedModel.selected = false;
          // }
          target.selected = true
          selectedModel = target

          setTimeout(function () {
            // 弹出信息框
            console.log('拾取对象类型:', target)
            console.log(info)
            self.$emit('getMapData', mapData)
          }, 300)
          break

          // 公共设施、图片标注模型
        case fengmap.FMNodeType.FACILITY:
        case fengmap.FMNodeType.IMAGE_MARKER:
          clickedPOI = true
          eventID = event.eventInfo.eventID
          var info = '拾取对象类型： 公共设施 \n' +
              '地图位置坐标：x: ' + event.eventInfo.coord.x + '，y:' + event.eventInfo.coord.y
          if (selectedModel) {
            selectedModel.selected = false
          }
          // 弹出信息框
          alert(info)
          break
      }
    },
    /**
     * 获取某个标签某个时段的轨迹数据
     */
    async getLocusData () {
      if (!naviSwitch) {
        return
      }
      var self = this
      tagLocus = []
      coordsData = []
      coodrs = []
      var data = {
        tagId: self.tagId,
        inTime: self.inTime,
        outTime: self.outTime
      }
      tagLocus = await getTagAction(data)
      if (tagLocus) {
        tagLocus.forEach((item) => {
          var locus = {
            x: item.mapx,
            y: item.mapy,
            groupID: item.groupId
          }
          coodrs.push(locus)
        })
      }
      if (navi) {
        navi.clearAll()
        navi.clearNaviLine()
        navi = 0
      }
      self.addlocationMarker(coodrs[0])
      self.createNavi(coodrs)
    },

    /**
     * 加载楼层切换控件
     * */
    initFloorControl () {
      // 楼层控制控件配置参数
      var floorCtlOpt = {
        // 默认在左下角
        position: fengmap.FMControlPosition.RIGHT_TOP,
        // 初始楼层按钮显示个数配置。默认显示5层,其他的隐藏，可滚动查看
        showBtnCount: 6,
        // 设置x,y的位置偏移量
        offset: {
          x: -100,
          y: 110
        }
      }
      // 创建buttonGroupsControl
      floorControl = new fengmap.FMButtonGroupsControl(map, floorCtlOpt)
    },
    /**
     * 添加定位点marker
     * */
    addlocationMarker (coord) {
      console.log('添加定位点marker', coord)
      var self = this
      if (!locationMarker) {
        locationMarker = new fengmap.FMLocationMarker({
          // 设置图片的路径
          url: '/roomlocationwebs/dist/resource/style/wedgets/img/pointer.png',
          // 设置图片显示尺寸
          size: 35,
          // 设置图片高度
          height: 3
        })
        // 添加定位点标注
        map.addLocationMarker(locationMarker)
      }

      // 设置定位图标位置
      self.setLocationMakerPosition(coord)
    },
    /**
     * 设置定位标注点位置信息
     * */
    setLocationMakerPosition (coord, angle) {
      // 设置定位图标旋转角度
      if (angle) {
        // 定位点方向始终与路径线保持平行
        locationMarker.rotateTo({
          to: -angle,
          duration: 0.5
        })
      }
      // 不同楼层
      var currentGid = map.focusGroupID
      if (currentGid !== coord.groupID) {
        // 重新设置聚焦楼层
        floorControl.changeFocusGroup(coord.groupID, false)
        // 设置locationMarker的位置
        locationMarker.setPosition({
          // 设置定位点的x坐标
          x: coord.x,
          // 设置定位点的y坐标
          y: coord.y,
          // 设置定位点所在楼层
          groupID: coord.groupID
        })
      }
      // 移动locationMarker
      var data = {
        // 设置定位点的x坐标
        x: coord.x,
        // 设置定位点的y坐标
        y: coord.y,
        // 设置定位点所在楼层
        groupID: coord.groupID,
        time: 1
      }
      // 移动locationMarker
      locationMarker.moveTo(data)
    },
    /**
     * 创建导航
     * fengmap.FMNavigation 导航相关的控制类,封装了自动设置起始点标注，路径分析，模拟导航，导航动画的功能。
     * https://www.fengmap.com/docs/js/v2.4.1_beta/fengmap.FMNavigation.html
     * */
    createNavi (coords) {
      var self = this
      if (!navi) {
        // 初始化导航对象
        navi = new fengmap.FMNavigation({
          // 地图对象
          map: map,
          // 导航结果文字描述内容的语言类型参数, 目前支持中英文。参考FMLanguaeType。
          naviLanguage: fengmap.FMLanguageType.ZH,
          // 导航中路径规划模式, 支持最短路径、最优路径两种。默认为MODULE_SHORTEST, 最短路径。
          naviMode: fengmap.FMNaviMode.MODULE_SHORTEST,
          // 导航中的路线规划梯类优先级, 默认为PRIORITY_DEFAULT, 详情参考FMNaviPriority。
          naviPriority: fengmap.FMNaviPriority.PRIORITY_DEFAULT,
          // 调用drawNaviLine绘制导航线时, 是否清除上次调用drawNaviLine绘制的导航线, 默认为true
          autoClearNaviLine: false,
          // 导航线与楼层之间的高度偏移设置。默认是1。
          lineMarkerHeight: 1,
          // 模拟导航时是否地图跟随,默认true
          followPosition: true,
          // 是否在导航开始时改变地图的倾斜角度,默认为true
          changeTiltAngle: false,
          // 设置导航线的样式
          lineStyle: {
            // 导航线样式
            lineType: fengmap.FMLineType.FMARROW,
            // 设置线的宽度
            lineWidth: 6,
            // //设置线动画,false为动画
            noAnimate: true
          }
        })
        naviList.push(navi)
      }
      navi.setStartPoint({
        x: coords[0].x,
        y: coords[0].y,
        groupID: coords[0].groupID,
        url: '/roomlocationwebs/dist/resource/style/wedgets/img/start.png',
        size: 32
      })
      navi.setEndPoint({
        x: coords[coords.length - 1].x,
        y: coords[coords.length - 1].y,
        groupID: coords[coords.length - 1].groupID,
        url: '/roomlocationwebs/dist/resource/style/wedgets/img/end.png',
        size: 32
      })
      for (var i = 0; i < coords.length - 1; i++) {
        navi.setStartPoint({
          x: coords[i].x,
          y: coords[i].y,
          groupID: coords[i].groupID,
          size: 32
        })
        navi.setEndPoint({
          x: coords[i + 1].x,
          y: coords[i + 1].y,
          groupID: coords[i + 1].groupID,
          size: 32
        })
        // 画出导航线
        navi.drawNaviLine()
      }
      console.log('获取路线的点集')
      console.log(navi._naviLineMarkers)
      for (var i = 0; i < navi._naviLineMarkers.length; i++) {
        if (navi._naviLineMarkers[i].segment[0] != undefined) {
          for (var j = 0; j < navi._naviLineMarkers[i].segment.length; j++) {
            navi._naviLineMarkers[i].segment[j].points.forEach(function (point) {
              coordsData.push({
                x: point.x,
                y: point.y,
                groupID: navi._naviLineMarkers[i].segment[j]._groupId
              })
            })
          }
        }
      }
      for (var i = 0; i < coordsData.length - 1; i++) {
        if (coordsData[i].x == coordsData[i + 1].x && coordsData[i].y == coordsData[i + 1].y && coordsData[i].groupID == coordsData[i +
        1].groupID) {
          coordsData.splice(i, 1)
        }
      }
      // 监听导航事件
      navi.on('walking', function (data) {
        console.log('定位坐标移动！！！！')
        /**
         * 当定位点偏离路径线大于约定的最大偏移距离时，进行路径重新规划
         * */
        if (data.distance > minOffsetDis) {
          // 在最小和最大偏移距离之间，坐标点用原始定位坐标
          data.point = currentCoord
        }
        // 更新导航信息
        self.setNaviDescriptions(data)
        // 更新定位图标的位置及旋转角度
        console.log(data.point)
        self.setLocationMakerPosition(data.point, data.angle)
      })
    },
    /**
     * 定位真实导航坐标
     * */
    changeCoord () {
      var self = this
      clearTimeout(naviInt)
      // 定时器
      naviInt = setTimeout(function () {
        if (!map || !navi) return
        if (coordIndex >= coordsData.length || naviStoped) {
          self.stopNavi()
          return
        }
        currentCoord = coordsData[coordIndex]
        /**
         * 1.用于真实导航，设置定位系统所返回的真实定位坐标，内部自动路径约束，同时触发walking事件
         * 返回如下结果： {remain: 到终点的剩余距离, walk: 已经走过的距离, distanceToNext: 是下一个转角处的距离,
         * angle: 当前路线与正北方向的角度, index: 当前路段的索引, point: 路径约束后的点, groupID, 当前的楼层id}
         * https://www.fengmap.com/docs/js/v2.4.1_beta/fengmap.FMNavigation.html#locate
         * */
        navi.locate(currentCoord)

        coordIndex++
        self.changeCoord()
      }, 1050)
    },

    /**
     * 开始导航
     * */
    startNavi (obj) {
      var self = this
      if (!naviSwitch) {
        return
      }
      // 导航结束之后再次点击开始导航，需重新进行路线规划及模拟定位点
      if (naviStoped) {
        naviStoped = false
        // coordsData = [];
        console.log('导航结束之后再次点击开始导航')
        self.createNavi(coodrs)
      }
      // 导航开关为true且已经加载完locationMarker是可进行导航操作
      if (naviSwitch && locationMarker) {
        naviSwitch = false
        coordIndex = 0
        // 切换聚焦楼层为起点开始楼层
        if (navi.startMarker.groupID !== map.focusGroupID) {
          floorControl.changeFocusGroup(navi.startMarker.groupID, false)
        }
        // 将定位点定位到起点楼层
        if (locationMarker.groupID != navi.startMarker.groupID) {
          // 设置locationMarker的位置
          locationMarker.setPosition({
            // 设置定位点的x坐标
            x: navi.startMarker.x,
            // 设置定位点的y坐标
            y: navi.startMarker.y,
            // 设置定位点所在楼层
            groupID: navi.startMarker.groupID
          })
        }
        // 禁用楼层切换控件
        floorControl.expand = false
        floorControl.enableExpand = false
        // 导航开始
        self.changeCoord()
        //  navi.simulate();
      }
    },
    /**
     * 距离、时间信息展示
     * */
    setNaviDescriptions (data) {
      var self = this
      // 距终点的距离
      var distance = data.remain
      // 路线提示信息
      var prompt = navi.naviDescriptions[data.index]
      if (distance < maxEndDistance) {
        var descriptionDom = document.getElementById('description')
        descriptionDom.innerHTML = '导航结束!'
        self.stopNavi()
        return
      }
      // 普通人每分钟走80米。
      var time = distance / 80
      var m = parseInt(time)
      var s = Math.floor((time % 1) * 60)
      // 距离终点距离、时间信息展示
      var descriptionDom = document.getElementById('description')
      descriptionDom.innerHTML = '<p>距终点：' + distance.toFixed(1) + ' 米</p><p>大约需要：  ' + m + '  分钟   ' + s + '   秒</p><p>路线提示：' + prompt + ' </p>'
      descriptionDom.style.display = 'block'
    },
    /**
     * 结束导航，重置导航开关参数
     * */
    stopNavi () {
      // 修改导航状态
      naviSwitch = true
      naviStoped = true
      floorControl.enableExpand = true
      // 还原导航前地图缩放比例
      map.mapScaleLevel = {
        level: startNaviScaleLevel,
        duration: 0.5,
        callback: function () {
        }
      }
      clearTimeout(naviInt)
    },
    /**
     * 设置地图背景色
     * */
    setBgColor (color, alpha) {
      // 设置背景颜色及透明度
      // color: 十六进制颜色值或CSS颜色样式: 0xFF0000 | '#FF0000'
      // alpha: 透明度在0 ~ 1之间取值
      if (map != null) {
        map.setBackgroundColor(color, alpha)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.body_contain {
  width: 100%;
  height: 100%;
}

.textofuser {
  color: #808080;
  font-size: 16px;
}

.fengMap {
  width: 96%;
  height: calc(100vh - 130px);
  margin: 0 auto;
  border: 1px solid #EEEEEE;
}

.maptop {
  height: 50px;
  line-height: 50px;
}
</style>
